CSS లైట్-డార్క్ ఫంక్షన్: గ్లోబల్ ప్రేక్షకుల కోసం ఆటోమేటిక్ థీమ్ మార్పిడి

నేటి వెబ్ వాతావరణంలో, వినియోగదారుల ప్రాధాన్యతలకు అనుగుణంగా ఉండటం చాలా ముఖ్యం. లైట్ మరియు డార్క్ థీమ్‌ల మధ్య మారే ఎంపికను అందించడం దీనిలో ఒక ముఖ్యమైన అంశం. ఇది కేవలం సౌందర్యం గురించి మాత్రమే కాదు; ఇది యాక్సెసిబిలిటీ మరియు కంటి ఒత్తిడిని తగ్గించడం గురించి, ప్రత్యేకించి వేర్వేరు సమయ మండలాల్లోని వినియోగదారులకు లేదా విభిన్న లైటింగ్ పరిస్థితులలో పనిచేసే వారికి. CSS `prefers-color-scheme` మీడియా క్వెరీ వినియోగదారుడి సిస్టమ్ ప్రాధాన్యతల ఆధారంగా మీ వెబ్‌సైట్ థీమ్‌ను స్వయంచాలకంగా సర్దుబాటు చేయడానికి ఒక శుభ్రమైన మరియు సమర్థవంతమైన మార్గాన్ని అందిస్తుంది. ఈ కథనం ఈ ఫీచర్‌ను ప్రపంచ ప్రేక్షకుల కోసం అమలు చేయడంలో మీకు మార్గనిర్దేశం చేస్తుంది, సజావుగా మరియు వినియోగదారు-స్నేహపూర్వక అనుభవాన్ని అందిస్తుంది.

లైట్/డార్క్ థీమ్ మార్పిడిని ఎందుకు అమలు చేయాలి?

లైట్ మరియు డార్క్ థీమ్‌లను అందించడం వలన అనేక ముఖ్యమైన ప్రయోజనాలు ఉన్నాయి:

• మెరుగైన వినియోగదారు అనుభవం: చాలా మంది వినియోగదారులు తక్కువ కాంతి వాతావరణంలో డార్క్ మోడ్‌ను కళ్లకు సులభంగా భావిస్తారు. దీనికి విరుద్ధంగా, ప్రకాశవంతమైన ప్రదేశాలలో లైట్ మోడ్ ప్రాధాన్యత పొందవచ్చు. ఎంచుకునే ఎంపికను అందించడం వినియోగదారు సంతృప్తిని పెంచుతుంది.
• యాక్సెసిబిలిటీ: దృష్టి లోపాలు ఉన్న వినియోగదారులు ఒక థీమ్‌ను మరొకదాని కంటే ఎక్కువ అందుబాటులో ఉండేలా కనుగొనవచ్చు. వారికి ఎంపిక ఇవ్వడం సమగ్రతను మెరుగుపరుస్తుంది.
• కంటి ఒత్తిడి తగ్గడం: డార్క్ మోడ్ కంటి ఒత్తిడిని తగ్గించగలదు, ప్రత్యేకించి స్క్రీన్‌ల ముందు ఎక్కువ గంటలు గడిపే వినియోగదారులకు. వేర్వేరు టైమ్ జోన్‌లలో రాత్రిపూట ఆలస్యంగా పనిచేసే వినియోగదారులకు ఇది చాలా ముఖ్యం.
• బ్యాటరీ లైఫ్ (OLED స్క్రీన్‌లు): OLED స్క్రీన్‌లు ఉన్న పరికరాలలో, డార్క్ మోడ్ ఉపయోగించడం బ్యాటరీ లైఫ్‌ను గణనీయంగా పొడిగించగలదు.
• ఆధునిక డిజైన్ ట్రెండ్: డార్క్ మోడ్ ఒక ప్రసిద్ధ డిజైన్ ట్రెండ్, మరియు దానిని అందించడం మీ వెబ్‌సైట్ నూతనంగా ఉందని మరియు వినియోగదారు ప్రాధాన్యతలను పరిగణనలోకి తీసుకుంటుందని చూపిస్తుంది.

`prefers-color-scheme`ను అర్థం చేసుకోవడం

`prefers-color-scheme` మీడియా క్వెరీ మీ వెబ్‌సైట్‌ను వినియోగదారుడి ఆపరేటింగ్ సిస్టమ్ లేదా బ్రౌజర్‌లో వారి ఇష్టపడే కలర్ స్కీమ్ సెట్టింగ్‌ను గుర్తించడానికి అనుమతిస్తుంది. దీనికి మూడు సాధ్యమైన విలువలు ఉండవచ్చు:

• `light`: వినియోగదారు లైట్ థీమ్‌ను అభ్యర్థించారని సూచిస్తుంది.
• `dark`: వినియోగదారు డార్క్ థీమ్‌ను అభ్యర్థించారని సూచిస్తుంది.
• `no-preference`: వినియోగదారు ఎటువంటి ప్రాధాన్యతను వ్యక్తపరచలేదని సూచిస్తుంది. వినియోగదారు స్పష్టంగా లైట్ లేదా డార్క్ థీమ్‌ను ఎంచుకోకపోతే ఇది డిఫాల్ట్ విలువ.

వినియోగదారు ప్రాధాన్యత ఆధారంగా వేర్వేరు స్టైల్స్‌ను వర్తింపజేయడానికి మీరు మీ CSSలో ఈ మీడియా క్వెరీని ఉపయోగించవచ్చు.

అమలు చేసే దశలు: ఒక ప్రాక్టికల్ గైడ్

CSS ఉపయోగించి ఆటోమేటిక్ లైట్ మరియు డార్క్ థీమ్ మార్పిడిని అమలు చేయడానికి ఇక్కడ దశలవారీ గైడ్ ఉంది:

1. CSS కస్టమ్ ప్రాపర్టీలను (వేరియబుల్స్) నిర్వచించండి

సజావుగా మారడానికి కీలకం CSS కస్టమ్ ప్రాపర్టీలను (CSS వేరియబుల్స్ అని కూడా అంటారు) ఉపయోగించడంలో ఉంది. థీమ్ ఆధారంగా మీరు మార్చాలనుకుంటున్న రంగులు, బ్యాక్‌గ్రౌండ్‌లు మరియు ఇతర స్టైల్ లక్షణాల కోసం వేరియబుల్స్‌ను నిర్వచించండి.

ఉదాహరణ:

            
:root {
  --background-color: #ffffff; /* Light mode background */
  --text-color: #000000; /* Light mode text */
  --link-color: #007bff; /* Light mode link color */
}

            

              
                Copy
              
            
          

ఈ కోడ్ మూడు కస్టమ్ ప్రాపర్టీలను నిర్వచిస్తుంది: `--background-color`, `--text-color`, మరియు `--link-color`. ఈ ప్రాపర్టీలు మొదట లైట్ థీమ్‌కు అనువైన విలువలకు సెట్ చేయబడ్డాయి.

2. మీ స్టైల్స్‌లో కస్టమ్ ప్రాపర్టీలను ఉపయోగించండి

మీ వెబ్‌సైట్ ఎలిమెంట్స్‌ను స్టైల్ చేయడానికి మీ CSS అంతటా ఈ కస్టమ్ ప్రాపర్టీలను వర్తింపజేయండి.

ఉదాహరణ:

            
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

            

              
                Copy
              
            
          

ఈ కోడ్ `body` ఎలిమెంట్ యొక్క `background-color`ను `--background-color` కస్టమ్ ప్రాపర్టీ విలువకు, `body` ఎలిమెంట్ యొక్క `color`ను `--text-color` కస్టమ్ ప్రాపర్టీ విలువకు, మరియు `a` (లింక్) ఎలిమెంట్ యొక్క `color`ను `--link-color` కస్టమ్ ప్రాపర్టీ విలువకు సెట్ చేస్తుంది.

3. `prefers-color-scheme` మీడియా క్వెరీని అమలు చేయండి

ఇప్పుడు, డార్క్ థీమ్ కోసం కస్టమ్ ప్రాపర్టీలను పునర్నిర్వచించడానికి `prefers-color-scheme` మీడియా క్వెరీని ఉపయోగించండి.

ఉదాహరణ:

            
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Dark mode background */
    --text-color: #ffffff; /* Dark mode text */
    --link-color: #66b3ff; /* Dark mode link color */
  }
}

            

              
                Copy
              
            
          

వినియోగదారుడి సిస్టమ్ ప్రాధాన్యత డార్క్ మోడ్‌కు సెట్ చేయబడితే మాత్రమే ఈ కోడ్ కర్లీ బ్రేస్‌ల లోపల ఉన్న స్టైల్స్‌ను వర్తింపజేస్తుంది. మీడియా క్వెరీ లోపల, కస్టమ్ ప్రాపర్టీలు డార్క్ థీమ్‌కు అనువైన విలువలతో పునర్నిర్వచించబడ్డాయి.

4. `no-preference`ను నిర్వహించడం

ఇది ఖచ్చితంగా అవసరం కానప్పటికీ, మీరు ఒక నిర్దిష్ట డిఫాల్ట్ థీమ్‌ను నిర్ధారించుకోవాలనుకుంటే మీరు `no-preference` కేస్‌ను స్పష్టంగా నిర్వహించవచ్చు. OSలో ప్రాధాన్యత ఎంపిక చేయకపోతే, బ్రౌజర్‌లు సాధారణంగా లైట్‌కు డిఫాల్ట్ అవుతాయి. అయినప్పటికీ, స్పష్టంగా చెప్పడం వలన సైట్ వేర్వేరు బ్రౌజర్‌లలో ఒకే విధంగా రెండర్ అవుతుందని నిర్ధారిస్తుంది.

ఉదాహరణ:

            
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #f0f0f0; /* Default background (light gray) */
    --text-color: #333333; /* Default text (dark gray) */
  }
}

            

              
                Copy
              
            
          

ఈ ఉదాహరణలో, థీమ్‌ను స్పష్టంగా ఎంచుకోని వినియోగదారుల కోసం మేము లేత బూడిద రంగు బ్యాక్‌గ్రౌండ్ మరియు ముదురు బూడిద రంగు టెక్స్ట్‌ను సెట్ చేస్తున్నాము.

పూర్తి ఉదాహరణ

అన్ని దశలను కలిపి ఇక్కడ ఒక పూర్తి ఉదాహరణ ఉంది:

            
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
  --header-background-color: #f8f9fa;
  --header-text-color: #212529;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

h1, h2, h3 {
  margin-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #66b3ff;
    --header-background-color: #212529;
    --header-text-color: #f8f9fa;
  }
}

            

              
                Copy
              
            
          

మరింత ముందుకు: మాన్యువల్ టోగుల్ జోడించడం

ఆటోమేటిక్ థీమ్ స్విచింగ్ సౌకర్యవంతంగా ఉన్నప్పటికీ, కొంతమంది వినియోగదారులు తమ థీమ్‌ను మాన్యువల్‌గా ఎంచుకోవడానికి ఇష్టపడవచ్చు. మీరు సిస్టమ్ ప్రాధాన్యతను ఓవర్‌రైడ్ చేయడానికి వినియోగదారులను అనుమతించే టోగుల్ బటన్‌ను మీ వెబ్‌సైట్‌కు జోడించవచ్చు.

1. HTML నిర్మాణం

థీమ్ టోగుల్‌గా పనిచేయడానికి మీ HTMLకి ఒక బటన్ లేదా చెక్‌బాక్స్‌ను జోడించండి.

            
Toggle Theme

            

              
                Copy
              
            
          

2. జావాస్క్రిప్ట్ లాజిక్

టోగుల్‌పై క్లిక్‌లను గుర్తించడానికి జావాస్క్రిప్ట్‌ను ఉపయోగించండి మరియు `body` ఎలిమెంట్‌లో (లేదా ఏదైనా ఇతర అనువైన పేరెంట్ ఎలిమెంట్) CSS క్లాస్‌ను అప్‌డేట్ చేయండి. వినియోగదారుడి ప్రాధాన్యతను సెషన్‌ల అంతటా నిలిపి ఉంచడానికి `localStorage`లో నిల్వ చేయండి.

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body; // or document.documentElement
const localStorageKey = 'theme';

// Function to set the theme
function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
  localStorage.setItem(localStorageKey, theme);
}

// Function to get the stored theme
function getStoredTheme() {
  return localStorage.getItem(localStorageKey) || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

// Set the initial theme
const initialTheme = getStoredTheme();
setTheme(initialTheme);

// Toggle the theme on button click
themeToggle.addEventListener('click', () => {
  const currentTheme = body.classList.contains('dark-theme') ? 'light' : 'dark';
  setTheme(currentTheme);
});

// Listen for system preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    if(localStorage.getItem(localStorageKey) === null) {
        const newColorScheme = event.matches ? "dark" : "light";
        setTheme(newColorScheme)
    }
});

            

              
                Copy
              
            
          

3. CSS స్టైలింగ్

`dark-theme` క్లాస్ ఆధారంగా డార్క్ థీమ్ స్టైల్స్‌ను వర్తింపజేయడానికి మీ CSSను సవరించండి.

            
.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #66b3ff;
  --header-background-color: #212529;
  --header-text-color: #f8f9fa;
}

            

              
                Copy
              
            
          

ఈ విధానం వినియోగదారులకు సిస్టమ్ ప్రాధాన్యతను ఓవర్‌రైడ్ చేస్తూ, మాన్యువల్‌గా థీమ్‌లను మార్చడానికి అనుమతిస్తుంది. `localStorage` వినియోగదారుడి ఎంపిక సెషన్‌ల అంతటా గుర్తుంచుకోబడుతుందని నిర్ధారిస్తుంది. ఈవెంట్ లిజనర్, వినియోగదారు మాన్యువల్‌గా ఒక థీమ్‌ను ఎంచుకోనప్పుడు, కానీ సిస్టమ్ ప్రాధాన్యత మారితే, సైట్ దానికి అనుగుణంగా స్పందిస్తుందని నిర్ధారిస్తుంది.

గ్లోబల్ ప్రేక్షకుల కోసం ఉత్తమ పద్ధతులు

ప్రపంచ ప్రేక్షకుల కోసం లైట్/డార్క్ థీమ్ మార్పిడిని అమలు చేస్తున్నప్పుడు, ఈ ఉత్తమ పద్ధతులను పరిగణించండి:

• యాక్సెసిబిలిటీ: రెండు థీమ్‌లు యాక్సెసిబిలిటీ మార్గదర్శకాలకు (WCAG) అనుగుణంగా ఉన్నాయని నిర్ధారించుకోండి. రంగు కాంట్రాస్ట్ మరియు చదవడానికి అనుకూలంగా ఉండేలా శ్రద్ధ వహించండి. WebAIM కలర్ కాంట్రాస్ట్ చెకర్ (https://webaim.org/resources/contrastchecker/) వంటి సాధనాలు సహాయపడతాయి.
• వినియోగదారు పరీక్ష: వారి ప్రాధాన్యతలపై అభిప్రాయాన్ని సేకరించడానికి మరియు ఏవైనా సంభావ్య సమస్యలను గుర్తించడానికి వేర్వేరు ప్రాంతాలు మరియు సంస్కృతుల నుండి వినియోగదారులతో మీ థీమ్‌లను పరీక్షించండి.
• పనితీరు: పేజీ లోడ్ సమయంపై ప్రభావాన్ని తగ్గించడానికి మీ CSSను ఆప్టిమైజ్ చేయండి. సంక్లిష్ట సెలెక్టర్‌లు మరియు అనవసరమైన స్టైల్స్‌ను నివారించండి.
• స్థిరమైన డిజైన్: రెండు థీమ్‌లలో స్థిరమైన డిజైన్ సౌందర్యాన్ని నిర్వహించండి. ఒక థీమ్‌లో లేదా మరొక థీమ్‌లో అసాధారణంగా కనిపించే మార్పులు లేదా ఎలిమెంట్స్‌ను నివారించండి.
• స్థానికీకరణ: మీ వెబ్‌సైట్ స్థానికీకరించబడితే, థీమ్ మార్పిడి యంత్రాంగం కూడా స్థానికీకరించబడిందని నిర్ధారించుకోండి. ఉదాహరణకు, థీమ్ టోగుల్ బటన్‌పై ఉన్న టెక్స్ట్ వినియోగదారుడి భాషలోకి అనువదించబడాలి.

అధునాతన పరిశీలనలు

• యానిమేషన్‌లు మరియు ట్రాన్సిషన్‌లు: థీమ్ మార్పిడి ప్రక్రియను సున్నితంగా మరియు మరింత దృశ్యమానంగా ఆకర్షణీయంగా చేయడానికి సూక్ష్మ యానిమేషన్‌లు మరియు ట్రాన్సిషన్‌లను ఉపయోగించండి. CSSలో `transition` ప్రాపర్టీని ఉపయోగించండి.
• చిత్రాలు మరియు ఐకాన్‌లు: లైట్ మరియు డార్క్ థీమ్‌ల కోసం చిత్రాలు మరియు ఐకాన్‌ల యొక్క వేర్వేరు వెర్షన్‌లను ఉపయోగించడాన్ని పరిగణించండి. SVG చిత్రాలు దీనికి ప్రత్యేకంగా సరిపోతాయి, ఎందుకంటే వాటి రంగులను CSS ఉపయోగించి సులభంగా సవరించవచ్చు.
• థర్డ్-పార్టీ లైబ్రరీలు: లైట్/డార్క్ థీమ్ మార్పిడి అమలును సులభతరం చేయగల వివిధ జావాస్క్రిప్ట్ లైబ్రరీలు మరియు ఫ్రేమ్‌వర్క్‌లు ఉన్నాయి. అయితే, వాటి డిపెండెన్సీలు మరియు సంభావ్య పనితీరు ప్రభావం గురించి జాగ్రత్త వహించండి.
• సర్వర్-సైడ్ రెండరింగ్ (SSR): మీరు SSR ఉపయోగిస్తుంటే, థీమ్ సర్వర్‌లో సరిగ్గా రెండర్ చేయబడిందని నిర్ధారించుకోండి. దీనికి క్లయింట్ నుండి సర్వర్‌కు వినియోగదారుడి థీమ్ ప్రాధాన్యతను పంపడం అవసరం కావచ్చు.
• కాంపోనెంట్-ఆధారిత ఆర్కిటెక్చర్‌లు: సింగిల్ పేజ్ అప్లికేషన్‌లు (SPAs) లేదా రియాక్ట్, వ్యూ లేదా యాంగ్యులర్ వంటి కాంపోనెంట్-ఆధారిత ఆర్కిటెక్చర్‌లతో నిర్మించిన సైట్‌ల కోసం, మరింత గ్రాన్యులర్ నియంత్రణ కోసం కాంపోనెంట్ స్థాయిలో థీమ్ క్లాసులు లేదా కస్టమ్ ప్రాపర్టీలను వర్తింపజేయండి.

ముగింపు

లైట్ మరియు డార్క్ థీమ్ మార్పిడిని అమలు చేయడం అనేది వినియోగదారు అనుభవం మరియు యాక్సెసిబిలిటీలో ఒక విలువైన పెట్టుబడి. CSS యొక్క `prefers-color-scheme` మీడియా క్వెరీ మరియు కస్టమ్ ప్రాపర్టీలను ఉపయోగించడం ద్వారా, మీరు ప్రపంచ ప్రేక్షకుల కోసం ఒక సజావుగా మరియు వినియోగదారు-స్నేహపూర్వక అనుభవాన్ని సృష్టించవచ్చు. మీ అమలు ప్రభావవంతంగా మరియు సమగ్రంగా ఉందని నిర్ధారించుకోవడానికి యాక్సెసిబిలిటీ, వినియోగదారు పరీక్ష మరియు పనితీరు ఆప్టిమైజేషన్‌ను పరిగణనలోకి తీసుకోవడం గుర్తుంచుకోండి. మాన్యువల్ ఓవర్‌రైడ్‌ను జోడించడం వినియోగదారులకు పూర్తి నియంత్రణను ఇస్తుంది. ఈ కథనంలో వివరించిన ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, మీరు వారి ప్రాధాన్యతలు లేదా వాతావరణంతో సంబంధం లేకుండా, వినియోగదారులందరికీ దృశ్యమానంగా ఆకర్షణీయంగా మరియు అందుబాటులో ఉండే వెబ్‌సైట్‌ను సృష్టించవచ్చు.